<template>
	<view>
		<!-- grid参考链接：
		https://segmentfault.com/a/1190000014690181 
		https://juejin.cn/post/7311631975470465039
		-->
		
		<view style="display: grid;grid-template-columns: 1fr 1fr;place-items: center;grid-auto-rows: 100rpx;">
			<text >text1</text>
			<text >text2</text>
			<text >text3</text>
			<text >text4</text>
		</view>
		<view style="background-color: aqua;height: 20rpx;"></view>
		<view style="margin-top:20rpx;display: grid;grid-template-columns: 1fr 1fr;place-items: center;grid-auto-rows: 100rpx;">
			<text style="grid-column-start: 1;grid-column-end: 3;background-color: red;width: 100%;height: 100%;">text1</text>
			<text style="grid-row-start: 2;grid-row-end: 4;background-color: blue;width: 100%;height: 100%;">text2</text>
			<text >text3</text>
			<text >text4</text>
			<text >text5</text>
			<text >text6</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
